﻿@using Entity;
@{
    ViewData["Title"] = "仓库管理";
    var organizations = ViewBag.Organizations ?? new List<SysOrgOrganizations>();
    var warehouseManagers = ViewBag.WarehouseManagers ?? new List<SysOrgUserManagement>();
}

<!-- 引入Element Plus样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入Element Plus -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入Element Plus图标库 -->
<script src="https://unpkg.com/@@element-plus/icons-vue"></script>

<div id="app" class="container mt-5">
    <!-- 仓库列表页面 -->
    <div v-if="currentView === 'listView'">

        <!-- 查询表单卡片 -->
        <el-card class="mb-4">
            <el-form :inline="true" :model="queryParams" ref="queryForm" class="mt-2">
                <el-form-item label="仓库名称/编号" prop="warehouseName">
                    <el-input v-model="queryParams.warehouseName" placeholder="请输入名称或编号" clearable style="width: 220px;"></el-input>
                </el-form-item>

                <el-form-item label="仓库状态" prop="warehouseStatus">
                    <el-select v-model="queryParams.warehouseStatus" placeholder="全部状态" clearable style="width: 220px;">
                        <el-option label="全部状态" value=""></el-option>
                        @foreach (var status in ViewBag.WarehouseStatusList ?? new List<WarehouseStatusDTO>())
                        {
                            <el-option label="@status.StatusName" value="@status.StatusValue"></el-option>
                        }
                    </el-select>
                </el-form-item>

                <el-form-item label="库管部门" prop="organizationId">
                    <el-select v-model="queryParams.organizationId" placeholder="全部部门" clearable style="width: 220px;">
                        <el-option label="全部部门" value=""></el-option>
                        @foreach (var org in organizations)
                        {
                            <el-option label="@org.organization_name" value="@org.organization_id"></el-option>
                        }
                    </el-select>
                </el-form-item>

                <el-form-item label="仓库主管" prop="warehouseManager">
                    <el-select v-model="queryParams.warehouseManager" placeholder="全部主管" clearable style="width: 220px;">
                        <el-option label="全部主管" value=""></el-option>
                        @foreach (var user in warehouseManagers)
                        {
                            <el-option label="@user.UserName" value="@user.UserId"></el-option>
                        }
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @@click ="handleQuery">查询</el-button>
                    <el-button @@click ="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 操作按钮组 -->
        <div class="mb-4">
            <el-button type="success" @@click ="handleAdd">新增</el-button>
            <el-button type="success" :disabled="!hasSelected" @@click ="handleBatchStatus(1, '启用')">启用</el-button>
            <el-button type="info" :disabled="!hasSelected" @@click ="handleBatchStatus(0, '停用')">停用</el-button>
            <el-button type="warning" :disabled="!hasSelected" @@click ="handleBatchStatus(2, '锁定')">锁定</el-button>
        </div>

        <!-- 仓库列表卡片 -->
        <el-card>
            <el-table v-loading="loading"
                      :data="tableData"
                      border
                      stripe
            @@selection-change ="handleSelectionChange"
                      style="width: 100%;">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="warehouse_number" label="仓库编号">
                    <template #default="scope">
                        <el-button type="text"
                                   class="link-button"
                        @@click ="handleViewDetail(scope.row.warehouse_id)">
                            {{ scope.row.warehouse_number }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="warehouse_name" label="仓库名称"></el-table-column>
                <el-table-column prop="warehouse_capacity" label="仓库容量/m³"></el-table-column>
                <el-table-column prop="warehouse_address" label="仓库地址"></el-table-column>
                <el-table-column label="库管部门">
                    <template #default="scope">
                        {{ getOrgName(scope.row.organizations_id) }}
                    </template>
                </el-table-column>
                <el-table-column label="仓库主管">
                    <template #default="scope">
                        {{ getUserName(scope.row.users_id) }}
                    </template>
                </el-table-column>
                <el-table-column prop="locationCount" label="库位数量"></el-table-column>
                <el-table-column label="仓库状态">
                    <template #default="scope">
                        <el-tag :type="statusConfig[scope.row.warehouse_status]?.type"
                                :effect="statusConfig[scope.row.warehouse_status]?.effect || 'light'"
                                :title="statusConfig[scope.row.warehouse_status]?.tip">
                            <template #default>
                                <span v-if="statusConfig[scope.row.warehouse_status]?.icon" class="me-1">
                                    {{ statusConfig[scope.row.warehouse_status].icon }}
                                </span>
                                {{ statusConfig[scope.row.warehouse_status]?.label || '未知' }}
                            </template>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="create_by" label="操作人"></el-table-column>
                <el-table-column label="操作时间">
                    <template #default="scope">
                        {{ formatDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="text"
                                   size="small"
                                   text-color="#67C23A"
                        @@click ="handleEdit(scope.row.warehouse_id)"
                                   :disabled="scope.row.warehouse_status === '2'"
                                   :title="scope.row.warehouse_status === '2' ? '锁定状态下不可编辑' : '编辑'">
                            编辑
                        </el-button>

                        <el-button type="text"
                                   size="small"
                                   :text-color="scope.row.warehouse_status === '2' ? '#409EFF' : '#E6A23C'"
                        @@click ="scope.row.warehouse_status === '2' ? handleUnlock(scope.row) : handleLock(scope.row)">
                            {{ scope.row.warehouse_status === '2' ? '解锁' : '锁定' }}
                        </el-button>

                        <el-button type="text"
                                   size="small"
                                   text-color="#F56C6C"
                        @@click ="handleDelete(scope.row.warehouse_id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 空状态 -->
            <div v-if="tableData.length === 0 && !loading" class="text-center py-5">
                <el-empty description="暂无符合条件的仓库数据"></el-empty>
            </div>

            <!-- 分页 -->
            <div class="mt-4 flex justify-between items-center">
                <div class="text-gray-500">
                    共 <span class="text-primary font-bold">{{ pagination.totalCount }}</span> 条记录
                </div>
                <el-pagination @@size-change ="handleSizeChange"
                @@current-change ="handleCurrentChange"
                               :current-page="pagination.pageIndex"
                               :page-sizes="[10, 20, 50]"
                               :page-size="pagination.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="pagination.totalCount"></el-pagination>
            </div>
        </el-card>
    </div>

    <!-- 仓库详情页面 -->
    <div v-if="currentView === 'detailView'">
        <el-card>
            <div slot="header" class="flex justify-between items-center">
                <el-button type="text" @@click ="goBack" class="mb-2">
                    <el-icon><arrow-left /></el-icon> 返回列表
                </el-button>
                <div>
                    <el-button :type="currentWarehouse.warehouse_status === '0' ? 'success' : 'info'"
                    @@click ="handleStatusChange(currentWarehouse.warehouse_status === '0' ? 1 : 0)">
                        {{ currentWarehouse.warehouse_status === '0' ? '启用' : '停用' }}
                    </el-button>
                    <el-button :type="currentWarehouse.warehouse_status === '2' ? 'primary' : 'warning'"
                    @@click ="handleStatusChange(currentWarehouse.warehouse_status === '2' ? 1 : 2)">
                        {{ currentWarehouse.warehouse_status === '2' ? '解锁' : '锁定' }}
                    </el-button>
                </div>
            </div>

            <div class="detail-header mb-6">
                <h2 class="mb-2">
                    {{ currentWarehouse.warehouse_name }}: {{ currentWarehouse.warehouse_number }}
                    <el-tag :type="statusConfig[currentWarehouse.warehouse_status]?.type" class="ml-3">
                        {{ statusConfig[currentWarehouse.warehouse_status]?.label || '未知' }}
                    </el-tag>
                </h2>
            </div>

            <el-descriptions column="3" border>
                <el-descriptions-item label="提交人">{{ currentWarehouse.create_by || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作时间">{{ formatDateTime(currentWarehouse.create_time) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ formatDateTime(currentWarehouse.update_time) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="仓库编号">{{ currentWarehouse.warehouse_number || '-' }}</el-descriptions-item>
                <el-descriptions-item label="仓库名称">{{ currentWarehouse.warehouse_name || '-' }}</el-descriptions-item>
                <el-descriptions-item label="仓库容量/m³">{{ currentWarehouse.warehouse_capacity || 0 }}</el-descriptions-item>
                <el-descriptions-item label="库管部门">{{ getOrgName(currentWarehouse.organizations_id) }}</el-descriptions-item>
                <el-descriptions-item label="仓库主管">{{ getUserName(currentWarehouse.users_id) }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ currentWarehouse.contact_phone || '-' }}</el-descriptions-item>
                <el-descriptions-item label="仓库地址" :span="3">{{ currentWarehouse.warehouse_address || '-' }}</el-descriptions-item>
                <el-descriptions-item label="备注" :span="3">{{ currentWarehouse.remark || '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ currentWarehouse.create_by || '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ formatDateTime(currentWarehouse.create_time) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="库位数量">{{ currentWarehouse.locationCount || 0 }}</el-descriptions-item>
                <el-descriptions-item label="更新人">{{ currentWarehouse.update_by || '-' }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ formatDateTime(currentWarehouse.update_time) || '-' }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag :type="statusConfig[currentWarehouse.warehouse_status]?.type">
                        {{ statusConfig[currentWarehouse.warehouse_status]?.label || '未知' }}
                    </el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</div>

<script>
    const { createApp, ref, reactive, computed, onMounted } = Vue;
    const { ElMessage, ElMessageBox, ElLoading, ElIcon } = ElementPlus;
    // 从全局图标库中获取需要的图标
    const { ArrowLeft } = ElementPlusIconsVue;

    createApp({
        components: {
            // 注册图标组件
            ArrowLeft
        },
        setup() {
            // 视图状态：列表视图/详情视图
            const currentView = ref('listView');
            // 当前查看的仓库详情
            const currentWarehouse = ref({});

            // 状态数据
            const loading = ref(false);
            const tableData = ref([]);
            const selectedIds = ref([]);
            const isOperating = ref(false);

            // 分页数据
            const pagination = reactive({
                pageIndex: 1,
                pageSize: 10,
                totalCount: 0
            });

            // 查询参数
            const queryParams = reactive({
                warehouseName: '',
                warehouseStatus: '',
                organizationId: '',
                warehouseManager: ''
            });

            // 状态配置（与后端状态值严格对应）
            const statusConfig = {
                '1': { label: '启用', type: 'success', icon: '✓', effect: 'dark' },
                '0': { label: '停用', type: 'info', icon: '◌', effect: 'dark' },
                '2': { label: '锁定', type: 'danger', icon: '🔒', tip: '已锁定，禁止出入库操作', effect: 'dark' }
            };

            // 组织和管理人员数据（从后端ViewBag序列化而来）
            const organizations = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(organizations));
            const warehouseManagers = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(warehouseManagers));

            // 计算属性：是否有选中项
            const hasSelected = computed(() => selectedIds.value.length > 0);

            // 初始化
            onMounted(() => {
                loadWarehouseList();
            });

            // 加载仓库列表
            const loadWarehouseList = async () => {
                loading.value = true;
                try {
                    const params = {
                        warehouseName: queryParams.warehouseName || '',
                        warehouseStatus: queryParams.warehouseStatus || '',
                        organizationId: queryParams.organizationId || '',
                        warehouseManager: queryParams.warehouseManager || '',
                        pageIndex: pagination.pageIndex,
                        pageSize: pagination.pageSize
                    };

                    const url = '@Url.Action("GetPageList", "Warehouse")';
                    const response = await fetch(`${url}?${new URLSearchParams(params)}`).then(res => res.json());

                    if (response && response.code === 200 && response.data) {
                        tableData.value = response.data.data || [];
                        pagination.totalCount = response.data.totalCount || 0;
                    } else {
                        tableData.value = [];
                        pagination.totalCount = 0;
                        ElMessage.warning('未查询到仓库数据');
                    }
                } catch (err) {
                    console.error("加载仓库列表失败：", err);
                    ElMessage.error(`加载失败：${err.message || '网络异常'}`);
                    tableData.value = [];
                    pagination.totalCount = 0;
                } finally {
                    loading.value = false;
                }
            };
            
            // 查看仓库详情
            const handleViewDetail = async (id) => {
                if (!id || id <= 0) {
                    ElMessage.error('无效的仓库ID');
                    return;
                }

                loading.value = true;
                try {
                    const url = '@Url.Action("GetDetail", "Warehouse")';
                    const response = await fetch(`${url}?id=${id}`).then(res => res.json());

                    if (response && response.code === 200 && response.data) {
                        currentWarehouse.value = response.data;
                        currentView.value = 'detailView';
                    } else {
                        ElMessage.error(response?.message || '获取仓库详情失败');
                    }
                } catch (err) {
                    console.error("获取仓库详情失败：", err);
                    ElMessage.error(`获取失败：${err.message || '网络异常'}`);
                } finally {
                    loading.value = false;
                }
            };

            // 返回列表
            const goBack = () => {
                currentView.value = 'listView';
            };

            // 处理查询
            const handleQuery = () => {
                pagination.pageIndex = 1;
                loadWarehouseList();
            };

            // 处理重置
            const handleReset = () => {
                queryParams.warehouseName = '';
                queryParams.warehouseStatus = '';
                queryParams.organizationId = '';
                queryParams.warehouseManager = '';
                pagination.pageIndex = 1;
                loadWarehouseList();
            };

            // 处理选择变化
            const handleSelectionChange = (selection) => {
                selectedIds.value = selection.map(item => item.warehouse_id);
            };

            // 处理分页大小变化
            const handleSizeChange = (val) => {
                pagination.pageSize = val;
                pagination.pageIndex = 1;
                loadWarehouseList();
            };

            // 处理页码变化
            const handleCurrentChange = (val) => {
                pagination.pageIndex = val;
                loadWarehouseList();
            };

            // 批量更新状态
            const handleBatchStatus = async (status, statusText) => {
                if (isOperating.value) return;
                if (selectedIds.value.length === 0) {
                    ElMessage.warning('请先选择仓库');
                    return;
                }

                // 锁定操作前检查是否有已锁定的仓库
                if (status === 2) {
                    const lockedItems = tableData.value.filter(
                        item => selectedIds.value.includes(item.warehouse_id) && item.warehouse_status === '2'
                    );

                    if (lockedItems.length > 0) {
                        return ElMessage.warning(`以下仓库已处于锁定状态：${lockedItems.map(item => item.warehouse_name).join('、')}`);
                    }
                }

                ElMessageBox.confirm(`确定要${statusText}选中的${selectedIds.value.length}个仓库吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    try {
                        isOperating.value = true;
                        const url = '@Url.Action("BatchUpdateStatus", "Warehouse")';
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                            },
                            body: new URLSearchParams({
                                ids: selectedIds.value.join(','),
                                status: status
                            })
                        }).then(res => res.json());

                        if (response.code === 200) {
                            ElMessage.success(`${statusText}成功`);
                            loadWarehouseList();
                        } else {
                            ElMessage.error(`${statusText}失败：${response.message || '操作未完成'}`);
                        }
                    } catch (err) {
                        console.error(`${statusText}失败：`, err);
                        ElMessage.error(`${statusText}失败：${err.message || '网络异常'}`);
                    } finally {
                        isOperating.value = false;
                    }
                }).catch(() => {
                    // 取消操作
                });
            };

            // 单个状态变更（用于详情页）
            const handleStatusChange = async (status) => {
                if (isOperating.value) return;
                if (!currentWarehouse.value.warehouse_id) return;

                const statusTextMap = { '0': '停用', '1': '启用', '2': '锁定' };
                const statusText = statusTextMap[status];

                ElMessageBox.confirm(`确定要${statusText}仓库【${currentWarehouse.value.warehouse_name}】吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    try {
                        isOperating.value = true;
                        const url = '@Url.Action("BatchUpdateStatus", "Warehouse")';
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                            },
                            body: new URLSearchParams({
                                ids: currentWarehouse.value.warehouse_id.toString(),
                                status: status
                            })
                        }).then(res => res.json());

                        if (response.code === 200) {
                            ElMessage.success(`${statusText}成功`);
                            // 刷新当前详情
                            handleViewDetail(currentWarehouse.value.warehouse_id);
                        } else {
                            ElMessage.error(`${statusText}失败：${response.message || '操作未完成'}`);
                        }
                    } catch (err) {
                        console.error(`${statusText}失败：`, err);
                        ElMessage.error(`${statusText}失败：${err.message || '网络异常'}`);
                    } finally {
                        isOperating.value = false;
                    }
                }).catch(() => {
                    // 取消操作
                });
            };

            // 新增仓库
            const handleAdd = () => {
                window.location.href = '@Url.Action("Add", "Warehouse")';
            };

            // 编辑仓库
            const handleEdit = (id) => {
                window.location.href = `@Url.Action("Edit", "Warehouse")?id=${id}`;
            };

            // 复制仓库
            const handleCopy = (id) => {
                window.location.href = `@Url.Action("Copy", "Warehouse")?id=${id}`;
            };

            // 锁定仓库
            const handleLock = async (row) => {
                if (isOperating.value) return;
                if (!row || !row.warehouse_id) return;

                // 检查是否已锁定
                if (row.warehouse_status === '2') {
                    return ElMessage.warning(`仓库【${row.warehouse_name}】已处于锁定状态`);
                }

                ElMessageBox.confirm(`确定要锁定仓库【${row.warehouse_name}】吗？锁定后将无法进行出入库操作！`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    try {
                        isOperating.value = true;
                        const url = '@Url.Action("BatchUpdateStatus", "Warehouse")';
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                            },
                            body: new URLSearchParams({
                                ids: row.warehouse_id.toString(),
                                status: 2
                            })
                        }).then(res => res.json());

                        if (response.code === 200) {
                            ElMessage.success('锁定成功');
                            loadWarehouseList();
                        } else {
                            ElMessage.error(`锁定失败：${response.message || '操作未完成'}`);
                        }
                    } catch (err) {
                        console.error('锁定失败：', err);
                        ElMessage.error(`锁定失败：${err.message || '网络异常'}`);
                    } finally {
                        isOperating.value = false;
                    }
                }).catch(() => {
                    // 取消操作
                });
            };

            // 解锁仓库
            const handleUnlock = async (row) => {
                if (isOperating.value) return;
                if (!row || !row.warehouse_id) return;

                ElMessageBox.confirm(`确定要解锁仓库【${row.warehouse_name}】吗？解锁后可恢复正常操作！`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(async () => {
                    try {
                        isOperating.value = true;
                        const url = '@Url.Action("BatchUpdateStatus", "Warehouse")';
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                            },
                            body: new URLSearchParams({
                                ids: row.warehouse_id.toString(),
                                status: 1
                            })
                        }).then(res => res.json());

                        if (response.code === 200) {
                            ElMessage.success('解锁成功');
                            loadWarehouseList();
                        } else {
                            ElMessage.error(`解锁失败：${response.message || '操作未完成'}`);
                        }
                    } catch (err) {
                        console.error('解锁失败：', err);
                        ElMessage.error(`解锁失败：${err.message || '网络异常'}`);
                    } finally {
                        isOperating.value = false;
                    }
                }).catch(() => {
                    // 取消操作
                });
            };

            // 删除仓库
            const handleDelete = async (id) => {
                if (isOperating.value) return;
                if (!id || id <= 0) {
                    ElMessage.error('无效的仓库ID');
                    return;
                }

                ElMessageBox.confirm(`确定要删除ID为${id}的仓库吗？此操作不可恢复！`, '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(async () => {
                    try {
                        isOperating.value = true;
                        const url = '@Url.Action("Delete", "Warehouse")';
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                            },
                            body: new URLSearchParams({ id: id })
                        }).then(res => res.json());

                        if (response.code === 200) {
                            ElMessage.success('删除成功');
                            // 如果当前在详情页，则返回列表
                            if (currentView.value === 'detailView') {
                                currentView.value = 'listView';
                            }
                            loadWarehouseList();
                        } else {
                            ElMessage.error(`删除失败：${response.message || '操作未完成'}`);
                        }
                    } catch (err) {
                        console.error('删除失败：', err);
                        ElMessage.error(`删除失败：${err.message || '网络异常'}`);
                    } finally {
                        isOperating.value = false;
                    }
                }).catch(() => {
                    // 取消操作
                });
            };

            // 打印功能
            const handlePrint = () => {
                // 实际项目中可以调用打印API或打开打印预览
                ElMessage.info('打印功能已触发');
                // 示例：window.print();
            };

            // 辅助函数：获取部门名称
            const getOrgName = (orgId) => {
                if (!orgId || orgId <= 0) return '-';
                const org = organizations.find(item => item.organization_id === orgId);
                return org ? org.organization_name : `[未知部门:${orgId}]`;
            };

            // 辅助函数：获取用户名（仓库主管）
            const getUserName = (userId) => {
                if (!userId || userId <= 0) return '-';
                const user = warehouseManagers.find(item => item.UserId === userId);
                return user ? user.UserName : `[未知用户:${userId}]`;
            };

            // 辅助函数：格式化日期时间
            const formatDateTime = (dateStr) => {
                if (!dateStr) return '-';
                const date = new Date(dateStr);
                // 检查是否为有效日期
                if (isNaN(date.getTime())) return '-';
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                }).replace(/\//g, '-');
            };

            return {
                currentView,
                currentWarehouse,
                loading,
                tableData,
                selectedIds,
                pagination,
                queryParams,
                statusConfig,
                hasSelected,
                handleQuery,
                handleReset,
                handleSelectionChange,
                handleSizeChange,
                handleCurrentChange,
                handleBatchStatus,
                handleStatusChange,
                handleAdd,
                handleEdit,
                handleCopy,
                handleLock,
                handleUnlock,
                handleDelete,
                handlePrint,
                handleViewDetail,
                goBack,
                getOrgName,
                getUserName,
                formatDateTime
            };
        }
    }).use(ElementPlus).mount('#app');
</script>

<style>
    .flex {
        display: flex;
    }

    .justify-between {
        justify-content: space-between;
    }

    .items-center {
        align-items: center;
    }

    .text-gray-500 {
        color: #606266;
    }

    .text-primary {
        color: #409EFF;
    }

    .font-bold {
        font-weight: bold;
    }

    .mt-4 {
        margin-top: 16px;
    }

    .mb-4 {
        margin-bottom: 16px;
    }

    .mb-2 {
        margin-bottom: 8px;
    }

    .mb-6 {
        margin-bottom: 24px;
    }

    .ml-3 {
        margin-left: 12px;
    }

    .link-button {
        color: #409EFF !important;
        padding: 0 !important;
        height: auto !important;
    }

    .detail-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
</style>